<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分时函数</title>
</head>

<body>
  <div>

  </div>

  <script>
    const arr = [];
    const nums = 10000;
    for (let i = 0; i < nums; i++) {
      arr.push(i);
    }

    function renderFriendsList(arr) {
      arr.forEach(val => {
        const div = document.createElement('div');
        div.innerHTML = val;
        document.body.appendChild(div);
      })
    }

    function renderFriend(item) {
      const div = document.createElement('div');
      div.innerHTML = item;
      document.body.appendChild(div);
    }

    function timeChunk(arr, fn, count) {
      let sit;
      function render(count) {
        let len = Math.min(count, arr.length);
        for (let i = 0; i < len; i++) {
          fn(arr.shift()) ;
        }
      }

      return function () {
        sit = setInterval(() => {
          if (arr.length === 0) {
            clearInterval(sit);
          }
          render(count);
        }, 6000)
      }
    }
    // renderFriendsList(arr);
    timeChunk(arr,renderFriend,10)();
  </script>
</body>

</html>